<template>
	<div class="login_container">
		<div class="container">
			<div class="top">
				<img src="@/assets/Login.png" />
			</div>
			<div class="bottom">
				<van-form validate-first>
					<van-field
						v-model="phone"
						name="用户名"
						label="用户名"
						placeholder="用户名"
						:rules="[{ pattern:phoneReg, message: '请输入正确手机号' }]"
					/>
					<van-field
						v-model="password"
						type="password"
						name="密码"
						label="密码"
						placeholder="密码"
						:rules="[{ pattern:pwdReg, message: '请填写密码' }]"
					/>
					<div style="margin: 16px">
						<van-button round block type="info" @click="handleLogin">登录</van-button>
					</div>
				</van-form>
				<div style="margin: 16px">
					<van-button round block type="info" @click="toRegister">注册</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { reqLogin } from '@/api'
import { saveToken } from '@/utils/auth'
import { Notify } from 'vant';

export default {
	name: 'Login',
	data() {
		return {
			phone: '',
			password: '',
			phoneReg: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            pwdReg : /^\w+$/
		}
	},
	methods: {
		//   登录
		async handleLogin() {
			//获取登录的参数
			const { phone, password } = this
			//请求登录
			let result = await reqLogin({ phone, password })
			//判断是否登录成功
			if (result.code === 200) {
				//登录成功
				saveToken(result.data.token)
				//提示
                Notify({ type: 'success', message: '登录成功!' });
				//跳到主页
				this.$router.push('/home')
			} else {
                Notify({ type: 'warning', message: result.message });
			}
		},
		//   注册
		toRegister() {
			this.$router.push({
				path: '/register',
			})
		},
	},
}
</script>

<style lang="less" scoped>
.login_container {
	.container {
		.top {
			text-align: center;
			img {
				padding-top: 2rem;
				padding-bottom: 2rem;
				width: 3rem;
				height: 1.5rem;
			}
		}
	}
}
</style>
